<script setup lang="ts">
// import { computed, inject, onMounted, ref, watch } from 'vue';
import { computed, ref, watch } from 'vue';

import { storeToRefs } from 'pinia';
// import { message } from 'ant-design-vue';
import { in1688ToDoudianStore } from '#/store/modules';
// interface PropsType {
//   selectId: number;
// }
import { Aptitude, Basis, Desc, Pci, PriceInventory, Sap } from './funcs';

defineOptions({
  name: 'DetailContent',
});
const in1688ToDoudian = in1688ToDoudianStore();
const { nowSelectTab, nowSelectGood, shopTabs } = storeToRefs(in1688ToDoudian);

const formState = computed(getNewFormState);

function getNewFormState() {
  const finds = shopTabs.value
    .find((item) => {
      return item.shopId === nowSelectTab.value;
    })
    ?.productDetailList?.find(
      (itemPrd: any) => itemPrd.offerId === nowSelectGood.value,
    );
  return finds;
}

const activeKey = ref('1');
watch(formState, () => {
  // console.log('formState', formState);
});
</script>

<template>
  <a-spin :spinning="formState.isLodin">
    <a-tabs v-model:active-key="activeKey" type="card">
      <a-tab-pane key="1">
        <template #tab>
          基础信息
          <a-popover
            v-if="formState.basisErrs && formState.basisErrs.errNum > 0"
            placement="bottom"
            title="必填未填写"
          >
            <template #content>
              <div
                v-for="(item, index) in formState.basisErrs.errList"
                :key="index"
              >
                <span class="text-red-500">*</span> {{ index + 1 }}:
                {{ item.msg }}
              </div>
            </template>
            <a-badge :offset="[10, -15]">
              <template #count>
                <div class="rounded bg-red-500 px-1 text-white">
                  {{ formState.basisErrs.errNum }} 错误
                </div>
              </template>
              <div></div>
            </a-badge>
          </a-popover>
        </template>
        <Basis v-if="activeKey === '1'" v-model="formState" />
      </a-tab-pane>
      <a-tab-pane key="2">
        <template #tab>
          图文信息
          <a-popover
            v-if="formState.picErrs && formState.picErrs.errNum > 0"
            placement="bottom"
            title="必填未填写"
          >
            <template #content>
              <div
                v-for="(item, index) in formState.picErrs.errList"
                :key="index"
              >
                <span class="text-red-500">*</span> {{ index + 1 }}:
                {{ item.msg }}
              </div>
            </template>
            <a-badge :offset="[10, -15]">
              <template #count>
                <div class="rounded bg-red-500 px-1 text-white">
                  {{ formState.picErrs.errNum }} 错误
                </div>
              </template>
              <div></div>
            </a-badge>
          </a-popover>
        </template>

        <Pci v-if="activeKey === '2'" v-model="formState" />
      </a-tab-pane>
      <a-tab-pane key="3">
        <template #tab>
          商品详情
          <a-popover
            v-if="formState.descErrs && formState.descErrs.errNum > 0"
            placement="bottom"
            title="必填未填写"
          >
            <template #content>
              <div
                v-for="(item, index) in formState.descErrs.errList"
                :key="index"
              >
                <span class="text-red-500">*</span> {{ index + 1 }}:
                {{ item.msg }}
              </div>
            </template>
            <a-badge :offset="[10, -15]">
              <template #count>
                <div class="rounded bg-red-500 px-1 text-white">
                  {{ formState.descErrs.errNum }} 错误
                </div>
              </template>
              <div></div>
            </a-badge>
          </a-popover>
        </template>

        <Desc v-if="activeKey === '3'" v-model="formState" />
      </a-tab-pane>
      <a-tab-pane key="4">
        <template #tab>
          价格库存
          <a-popover
            v-if="formState.priceErrs && formState.priceErrs.errNum > 0"
            placement="bottom"
            title="必填未填写"
          >
            <template #content>
              <div
                v-for="(item, index) in formState.priceErrs.errList"
                :key="index"
              >
                <span class="text-red-500">*</span> {{ index + 1 }}:
                {{ item.msg }}
              </div>
            </template>
            <a-badge :offset="[10, -15]">
              <template #count>
                <div class="rounded bg-red-500 px-1 text-white">
                  {{ formState.priceErrs.errNum }} 错误
                </div>
              </template>
              <div></div>
            </a-badge>
          </a-popover>
        </template>
        <PriceInventory v-show="activeKey === '4'" v-model="formState" />
      </a-tab-pane>
      <a-tab-pane v-if="0" key="5" tab="服务与履约">
        <Sap v-if="activeKey === '5'" v-model="formState" />
        <!-- <PriceInventory v-model="formState" /> -->
      </a-tab-pane>
      <a-tab-pane key="6" tab="商品资质">
        <Aptitude v-if="activeKey === '6'" v-model="formState" />
        <!-- <PriceInventory v-model="formState" /> -->
      </a-tab-pane>
    </a-tabs>
  </a-spin>

  <!-- <div>{{ selectIdComp }}{{ isSelectProductItem }}</div> -->
</template>
